<template>
  <div class="h-full p-3 max-md:pt-0 flex">
    <div v-if="SocketStore.socket" class="w-full h-full flex">
      <el-card class="w-[400px] max-md:w-full" :class="!isNil(messageInfo) ? 'max-md:hidden' : 'max-md:block'" v-loading="messageUserLoading">
        <div class="h-full flex flex-col">
          <!--        <div class="flex justify-between items-center mb-3">
                    <span>Message</span>
                    <el-button type="primary" round>导出有回复对话</el-button>
                  </div>-->
          <el-input v-model="searchValue" :placeholder="$t('conversation.index.708802-0')" prefix-icon="Search" clearable />
          <el-tabs v-model="MessageType" class="h-[calc(100%_-_32px)]">
            <el-tab-pane :label="$t('conversation.index.708802-1', [messList.length])" name="mass">
              <div class="h-full py-2 mx-[6px]">
                <ul v-if="messList.length > 0">
                  <li
                    v-for="(item, index) in messList"
                    :key="index"
                    :class="item.contacts == messageInfo?.contacts && item.taskId == messageInfo?.taskId ? 'bg-[rgb(237,237,237)] text-black' : ''"
                    class="relative flex items-center justify-between p-[15px] transition-all rounded-lg text-xs cursor-pointer hover:bg-[rgb(237,237,237)] hover:text-black"
                    @click="chioceChat(item)"
                  >
                    <div class="absolute bottom-[18px] left-[45px] w-[10px] h-[10px] z-10 flex flex-col">
                      <span v-if="item.status === 'SUCCESS'" class="bg-[var(--el-color-primary)] rounded-lg w-full h-full" />
                      <span v-if="item.status === 'INIT'" class="bg-[var(--el-color-warning)] rounded-lg w-full h-full" />
                      <span v-if="item.status === 'FAIL'" class="bg-[var(--el-color-error)] rounded-lg w-full h-full" />
                    </div>
                    <el-image :src="loadAssets(item.avatar)" :size="35"  class="mr-[15px] w-[35px] h-[35px] rounded-lg" />
                    <div class="flex-1 flex flex-col justify-between min-h-[44px]">
                      <div class="flex justify-between items-center">
                        <span class="font-bold text-sm text-[rgb(55,69,87)]">{{ item.contacts }}</span>
                        <span class="text-[#ccc]">{{ item.time }}</span>
                      </div>
                      <div class="flex justify-between items-center">
                        <div class="w-[215px] truncate text-xs text-[#5c5b5b] h-[24px] leading-[24px]">{{ item.content }}</div>
                        <span v-if="item.notReadCount > 0" class="bg-[#d74a4a] rounded-[50%] w-4 h-4 leading-4 text-center text-xs text-white">{{ item.notReadCount }}</span>
                      </div>
                    </div>
                  </li>
                </ul>
                <el-empty v-else class="h-full flex justify-center items-center" :image-size="150" />
              </div>
            </el-tab-pane>
            <el-tab-pane :label="$t('conversation.index.708802-2', [conversationList.length])" name="conversation">
              <div class="py-2 mx-[6px]" style="height: 100%;">
                <ul v-if="conversationList.length > 0">
                  <li
                    v-for="(item, index) in conversationList"
                    :key="index"
                    :class="item.contacts == messageInfo?.contacts && item.taskId == messageInfo?.taskId ? 'bg-[rgb(237,237,237)] text-black' : ''"
                    class="relative flex items-center justify-between p-[15px] transition-all rounded-lg text-xs cursor-pointer hover:bg-[rgb(237,237,237)] hover:text-black"
                    @click="chioceChat(item)"
                  >
                    <div class="absolute bottom-[18px] left-[45px] w-[10px] h-[10px] z-10 flex flex-col">
                      <span v-if="item.status === 'SUCCESS'" class="bg-[var(--el-color-primary)] rounded-lg w-full h-full" />
                      <span v-if="item.status === 'INIT'" class="bg-[var(--el-color-warning)] rounded-lg w-full h-full" />
                      <span v-if="item.status === 'FAIL'" class="bg-[var(--el-color-error)] rounded-lg w-full h-full" />
                    </div>
                    <el-image :src="loadAssets(item.avatar)" :size="35"  class="mr-[15px] w-[35px] h-[35px] rounded-lg" />
                    <div class="flex-1 flex flex-col justify-between min-h-[44px]">
                      <div class="flex justify-between items-center">
                        <span class="font-bold text-sm text-[rgb(55,69,87)]">{{ item.contacts }}</span>
                        <span class="text-[#ccc]">{{ item.time }}</span>
                      </div>
                      <div class="flex justify-between items-center">
                        <div class="w-[215px] truncate text-xs text-[#5c5b5b] h-[24px] leading-[24px]">{{ item.content }}</div>
                        <div class="flex justify-center items-center">
                          <span v-if="item.notReadCount > 0" class="mr-[2px] bg-[#d74a4a] rounded-[50%] w-4 h-4 leading-4 text-center text-xs text-white">{{ item.notReadCount }}</span>
                          <el-icon size="18px" color="#f7c83e" @click.stop="changeIsCollect(item)">
                            <StarFilled v-show="item.isCollect" />
                            <Star v-show="!item.isCollect" />
                          </el-icon>
                        </div>
                      </div>
                    </div>
                  </li>
                </ul>
                <el-empty v-else class="h-full flex justify-center items-center" :image-size="150" />
              </div>
            </el-tab-pane>
            <el-tab-pane :label="$t('conversation.index.708802-3', [collectList.length])" name="collect">
              <div class="h-full py-2 mx-[6px]">
                <ul v-if="collectList.length > 0">
                  <li
                    v-for="(item, index) in collectList"
                    :key="index"
                    :class="item.contacts == messageInfo?.contacts && item.taskId == messageInfo?.taskId ? 'bg-[rgb(237,237,237)] text-black' : ''"
                    class="relative flex items-center justify-between p-[15px] transition-all rounded-lg text-xs cursor-pointer hover:bg-[rgb(237,237,237)] hover:text-black"
                    @click="chioceChat(item)"
                  >
                    <div class="absolute bottom-[18px] left-[45px] w-[10px] h-[10px] z-10 flex flex-col">
                      <span v-if="item.status === 'SUCCESS'" class="bg-[var(--el-color-primary)] rounded-lg w-full h-full" />
                      <span v-if="item.status === 'INIT'" class="bg-[var(--el-color-warning)] rounded-lg w-full h-full" />
                      <span v-if="item.status === 'FAIL'" class="bg-[var(--el-color-error)] rounded-lg w-full h-full" />
                    </div>
                    <el-image :src="loadAssets(item.avatar)" :size="35"  class="mr-[15px] w-[35px] h-[35px] rounded-lg" />
                    <div class="flex-1 flex flex-col justify-between min-h-[44px]">
                      <div class="flex justify-between items-center">
                        <span class="font-bold text-sm text-[rgb(55,69,87)]">{{ item.contacts }}</span>
                        <span class="text-[#ccc]">{{ item.time }}</span>
                      </div>
                      <div class="flex justify-between items-center">
                        <div class="w-[215px] truncate text-xs text-[#5c5b5b] h-[24px] leading-[24px]">{{ item.content }}</div>
                        <div class="flex justify-center items-center">
                          <span v-if="item.notReadCount > 0" class="mr-[2px] bg-[#d74a4a] rounded-[50%] w-4 h-4 leading-4 text-center text-xs text-white">{{ item.notReadCount }}</span>
                          <el-icon size="18px" color="#f7c83e" @click.stop="changeIsCollect(item)">
                            <StarFilled v-show="item.isCollect" />
                            <Star v-show="!item.isCollect" />
                          </el-icon>
                        </div>
                      </div>
                    </div>
                  </li>
                </ul>
                <el-empty v-else class="h-full flex justify-center items-center" :image-size="150" />
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-card>
      <el-card v-if="!isNil(messageInfo)" class="messageInfo flex-1 ml-3">
        <div class="h-full flex flex-col bg-[#FAFAFA]">
          <div class="flex justify-between items-center w-full bg-[#ffffff] px-3">
            <el-image :src="loadAssets(messageInfo.avatar)" :size="35" class="mr-2 w-[35px] h-[35px] rounded-lg" />
            <div class="flex-1 mr-3 w-[calc(100$_-_75px)] text-[rgb(55,69,87)] py-3">
              <div class="w-full text-[16px] font-bold truncate">{{ messageInfo.contacts }}</div>
              <div class="flex items-center">
                <div class="w-[10px] h-[10px] flex flex-col">
                  <span v-if="messageInfo.status === 'SUCCESS'" class="bg-[var(--el-color-primary)] rounded-lg w-full h-full" />
                  <span v-if="messageInfo.status === 'INIT'" class="bg-[var(--el-color-warning)] rounded-lg w-full h-full" />
                  <span v-if="messageInfo.status === 'FAIL'" class="bg-[var(--el-color-error)] rounded-lg w-full h-full" />
                </div>
                <div class="flex flex-col !text-[13px] text-[#ccc] ml-2">
                  <span v-if="messageInfo.status === 'SUCCESS'">{{ $t('conversation.index.708802-4') }}</span>
                  <span v-if="messageInfo.status === 'INIT'">{{ $t('conversation.index.708802-5') }}</span>
                  <span v-if="messageInfo.status === 'FAIL'">{{ $t('conversation.index.708802-6') }}</span>
                </div>
              </div>
            </div>
            <el-icon class="cursor-pointer hover:text-[#abc169]" @click="messageInfo = undefined"><CloseBold /></el-icon>
          </div>
          <div ref="messageWrapRef" class="h-[calc(100%_-_67.5px)] overflow-y-auto">
            <div ref="messageContentRef" class="text-xs flex-1 p-3 messageContent min-h-[calc(100%_-_130px)]">
              <p class="text-center text-[#ccc]">{{ $t('conversation.index.708802-7') }}</p>
              <div v-for="(item, index) in messageHistoryList" :key="index" class="flex mt-2 w-full" :class="item.flag ? 'flex-row-reverse' : ''">
                <!--对方发出的消息-->
                <div :class="item.isSender ? 'hidden' : ''"  class="flex w-full">
                  <div class="w-full">
                    <div class="text-[rgb(78,90,106)] w-full text-wrap flex" style="word-wrap: break-word;word-break: normal;">
                      <div class="bg-[#DBDBDB] rounded-xl p-4" v-html="item.content" />
                    </div>
                    <p
                        v-if="(messageHistoryList[index - 1]?.isSender === item.isSender && !messageHistoryList[index + 1]?.isSender === item.isSender) || messageHistoryList[index + 1]?.isSender !== item.isSender"
                        class="mt-2 text-[rgb(188,183,198)] text-xs"
                    >{{ item.time }}</p>
                  </div>
                </div>
                <!--自己发出的消息-->
                <div :class="item.isSender ? '' : 'hidden'" class="flex w-full justify-end">
                  <div class="max-w-full">
                    <div class="text-[#fff] w-full text-wrap flex justify-end" style="word-wrap: break-word;word-break: normal;">
                      <div class="mr-2 flex flex-col">
                        <el-icon v-if="item.loading" color="#ccc" size="18px" class="is-loading flex-1" ><Loading /></el-icon>
                        <el-icon v-if="item.error && !item.loading" color="var(--el-color-error)" size="18px" class="flex-1" @click="resetSend(item, index)"><WarningFilled class="cursor-pointer" /></el-icon>
                      </div>
                      <div class="bg-[rgb(76,188,154)] rounded-xl p-4" v-html="item.content" />
                    </div>
                    <p
                        v-if="(messageHistoryList[index - 1]?.isSender === item.isSender && !messageHistoryList[index + 1]?.isSender === item.isSender) || messageHistoryList[index + 1]?.isSender !== item.isSender"
                        class="mt-2 text-[rgb(188,183,198)] text-right"
                    >{{ item.time }}</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="flex flex-col max-h-[130px] h-full sticky bottom-0">
              <div class="w-full flex-1 flex px-5 pb-3">
                <div class="w-full h-full rounded-[12px] flex items-center p-3 py-0 bg-[#ffffff]"  style="border: 1px solid rgb(224,224,224)">
                  <el-input
                    ref="editorRef"
                    v-model="editMessage.content"
                    type="textarea"
                    :maxlength="300"
                    class="flex-1 overflow-y-auto pt-0 !border-0 ability_info px-3 !h-[110px]"
                    :placeholder="$t('conversation.index.708802-8')"
                    @keydown.enter.exact.prevent="sendMessage()"
                    @keydown.shift.enter.prevent="newline"
                  />
                  <div class="flex">
                    <!--工具栏-->
                    <div class="mr-2">
                      <V3Emoji ref="emojiRef" :recent="true" @click-emoji="addExpression" />
                    </div>
                    <el-button type="primary" @click="sendMessage()" class="!rounded-[10px] !p-[17px_25px]">
                      {{ $t('conversation.index.708802-9') }}
                      <img src="@/assets/icons/Send.svg" alt="" class="w-[12px] ml-1">
                    </el-button>
                  </div>
                </div>
              </div>
            </div>
          </div>
<!--          style="box-shadow: 0 -1px 5px #ccc;"-->
        </div>
      </el-card>
    </div>
    <div v-else class="w-full h-full flex justify-center items-center text-[#333]">
      {{ $t('conversation.index.708802-10') }}
    </div>
  </div>
</template>

<script setup>
import dayjs from 'dayjs'
import tz from 'dayjs/plugin/timezone'
import utc from 'dayjs/plugin/utc'
import V3Emoji from 'vue3-emoji'
import 'vue3-emoji/dist/style.css'
import { createRandom, deepClone, defaultTo, isNil, loadAssets } from '@/utils/setting.js'
import useSocketStore from "@/store/modules/socket.js";

dayjs.extend(utc);
dayjs.extend(tz);

const SocketStore = useSocketStore()

const userAvatar = ref(sessionStorage.getItem('avatar')) // 当前用户头像
const searchValue = ref('')

const MessageType = ref('mass') // 切换类型
const messageUserList = ref(SocketStore.messageUserList) // 数据总列表
const messageUserLoading = ref(SocketStore.firstEnter) // 联系人加载
const messList = computed(() => {
  let list = messageUserList.value
  if (searchValue.value !== '') {
    const reg = new RegExp(searchValue.value.replace('+', ''), 'g')
    list = messageUserList.value.map(item => {
      if (reg.test(item.contacts)) return item
    }).filter(value => value !== undefined)
  }
  return list
}) // 群发消息列表
const conversationList = computed(() => {
  let list = messageUserList.value.map(item => {
    if (item.isReply) return item
  }).filter(value => value != undefined)
  if (searchValue.value !== '') {
    const reg = new RegExp(searchValue.value.replace('+', ''), 'g')
    list = list.map(item => {
      if (reg.test(item.contacts)) return item
    }).filter(value => value !== undefined)
  }
  return list
}) // 我的会话列表
const collectList = computed(() => {
  let list = messageUserList.value.map(item => {
    if (item.isCollect) return item
  }).filter(value => value !== undefined)
  if (searchValue.value !== '') {
    const reg = new RegExp(searchValue.value.replace('+', ''), 'g')
    list = list.map(item => {
      if (reg.test(item.contacts)) return item
    }).filter(value => value !== undefined)
  }
  return list
}) // 我的收藏列表

const messageLength = ref(300) // 编辑框最大输入数
const messageInfo = ref() // 消息详细信息
const messageHistoryList = ref([]) // 当前消息详情列表

const messageWrapRef = ref() // 滚动条外部的实例对象
const messageContentRef = ref() // 聊天记录内容实例对象

const editorRef = ref() // 当前消息输入框实例对象
const editMessage = ref({
  id: 0,
  content: ''
}) // 当前编辑的信息

const emojiRef = ref() // 表情实例对象

// 处理各类数据
const computeResponse = () => {
  SocketStore.setDefaultMessage((res) => {
    const data = JSON.parse(res.data || res)
    if (!['chat', 'updateStatus', 'collect'].includes(data.type)) {
      const { taskId, contact, type, content, time } = res.target.params
      const HistoryKey = SocketStore.messageHistoryAllList.findIndex(item => {
        return item.taskId == taskId && item.contact == contact
      }) // 从所有用户历史记录中找出单个用户历史记录
      const userKey = messageUserList.value.findIndex(item => {
        return item.taskId === taskId && item.contacts === contact
      })
      if (type === 'CONTACT') {
        messageUserList.value = SocketStore.messageUserList
        SocketStore.firstEnter = false
        messageUserLoading.value = false
      } else if (type === 'HISTORY') {
        messageHistoryList.value = SocketStore.messageHistoryAllList[HistoryKey].content
        // 根据用户未读数量判断是否发出已读请求
        if(messageUserList.value[userKey].notReadCount > 0) {
          SocketStore.socket.send({
            type: 'READ',
            taskId: messageInfo.value.taskId,
            contact: messageInfo.value.contacts,
            reset: !isNil(messageInfo.value)
          })
        }

        countralContent() // 聊天框置底

      } else if(type === 'SEND') {
        // 处理当前的详情信息
        const messageHistoryKey = messageHistoryList.value.findIndex(item => {
          return item.id === editMessage.value.id
        })
        if(messageHistoryKey > -1) {
          messageHistoryList.value[messageHistoryKey].error = data.code !== 200
          messageHistoryList.value[messageHistoryKey].loading = false
        }
        if (userKey > -1) {
          messageUserList.value[userKey].time = time
          messageUserList.value[userKey].notReadCount = 0  // 更改用户列表单个未读数量置0
          messageUserList.value[userKey].content = content
        }
      } else if (type === 'READ') {
        messageUserList.value[userKey].notReadCount = 0
      }
      sessionStorage.setItem('messageUserList', JSON.stringify(SocketStore.messageUserList)) // 更新用户列表最新消息 - 本地缓存
    } else {
      const { type, contacts, taskId } = data
      const userKey = messageUserList.value.findIndex(item => {
        return item.taskId == taskId && item.contacts == contacts
      }) // 用户人下标
      const messageHistoryKey = SocketStore.messageHistoryAllList.findIndex(item => {
        return item.taskId == taskId && item.contact == contacts
      }) // 获取当前信息在信息列表中的下标
      if (type === 'chat') {
        const isAddMsgNum = messageInfo.value !== undefined && messageInfo.value.contacts === contacts && messageInfo.value.taskId === taskId // 是否新增未读信息数
        if (userKey > -1) {
          messageUserList.value[userKey].content = data.content // 更新用户联系人最新消息
          messageUserList.value[userKey].time = dayjs(data.time).tz('America/New_York').format('YYYY-MM-DD HH:mm:ss')
        }

        // 当弹框打开并且和收到的消息属于一个用户
        if (isAddMsgNum) {
          messageUserList.value[userKey].notReadCount = 0
          SocketStore.messageUserList[userKey].notReadCount = 0
          nextTick(() => {
            countralContent() // 聊天框置底
          })
        }

        messageUserList.value = topContact(messageUserList.value) // 用户列表置顶
      } else if (type === 'updateStatus') {
        if (userKey > -1) {
          messageUserList.value[userKey].status = data.status
        }
      } else if (data.type === 'collect') {
        messageUserList.value[userKey].isCollect = data.isCollect
      }
      sessionStorage.setItem('messageUserList', JSON.stringify(SocketStore.messageUserList)) // 更新用户列表最新消息 - 本地缓存
    }
  })
}

// 收藏
const changeIsCollect = (data) => {
  SocketStore.socket.send({
    type: 'COLLECT',
    taskId: data.taskId,
    contact: data.contacts,
    isCollect: !data.isCollect
  })
}

// 置顶联系人
const topContact = (data) => {
  const Arr = deepClone(data)
  Arr.forEach((item, index) => {
    if (item.notReadCount > 0) {
      const params = deepClone(item)
      Arr.splice(index, 1)
      Arr.unshift(params)
    }
  })
  return Arr
}

// 选择聊天对象
const chioceChat = (data) => {
  messageInfo.value = data
  messageHistoryList.value = []
  // 从状态管理工具中查找是否存在
  const key = SocketStore.messageHistoryAllList.findIndex(item => {
    return item.taskId == data.taskId && item.contact == data.contacts
  })

  if (key > -1) {
    messageHistoryList.value = SocketStore.messageHistoryAllList[key].content
    if (data.notReadCount > 0) {
      // 发出已读请求
      SocketStore.socket.send({
        type: 'READ',
        taskId: messageInfo.value.taskId,
        contact: messageInfo.value.contacts,
      })
    }
    countralContent() // 把聊天框内容置底
  } else {
    SocketStore.socket.send({ type: 'HISTORY', taskId: data.taskId, contact: data.contacts })
  }
}

// 添加表情
const addExpression = (data) => {
  const key = editorRef.value.ref.selectionStart
  const firstMessage = editMessage.value.content.slice(0, key)
  const lastMessage = editMessage.value.content.substring(key, editMessage.value.content.length)
  editorRef.value.focus()
  if (editMessage.value.content.length < messageLength.value) {
    editMessage.value.content = firstMessage + data + lastMessage
    editorRef.value.ref.selectionStart = key + 2
    editorRef.value.ref.selectionEnd = key + 2
    emojiRef.value.closePop()
  } else {
    editorRef.value.ref.selectionStart = key
    editorRef.value.ref.selectionEnd = key
  }
}

// 换行
const newline = (event) => {
  event.preventDefault() // 阻止回车按键换行的默认操作
  editMessage.value.content += '\n'
}

// 控制聊天内容在顶部还是底部
const countralContent = () => {
  nextTick(() => {
    editorRef.value.focus() // 编辑框内重新获取焦点
    const setHeight = Number(window.getComputedStyle(messageContentRef.value).height.replace('px', ''))
    messageWrapRef.value.scrollTop = setHeight
  })
}

// 发送消息
const sendMessage = (text) => {
  if (editMessage.value.content.length > 0 || defaultTo(text, '').length > 0) {
    const key = messageHistoryList.value.length - 1 // 最后一条消息
    const params = {
      id: messageHistoryList.value.length > 0 ? defaultTo(messageHistoryList.value[key]?.id, 0) + 1 : 0,
      isSender: true,
      avatar: userAvatar.value,
      error: false,
      loading: true,
      time: dayjs().tz('America/New_York').format('YYYY-MM-DD HH:mm:ss'),
      content: `${text ? text : editMessage.value.content}`.replaceAll('\n', '</br>')
    }
    editMessage.value = deepClone(params)
    messageHistoryList.value.push(params)
    const exit = { type: 'SEND', taskId: messageInfo.value.taskId, contact: messageInfo.value.contacts, content: params.content, time: params.time }
    SocketStore.socket.send(exit)
    countralContent()
    if(!text) editMessage.value.content = ''
  }
}

// 重新发送
const resetSend = (data, key) => {
  sendMessage(data.content)
  messageHistoryList.value.splice(key, 1)
}

watch(() => messageUserList.value, (newValue, oldValue) => {
  if (JSON.stringify(newValue) !== JSON.stringify(oldValue)) {
    SocketStore.messageUserList = newValue
  }
}, { deep: true })

onMounted(() => {
  // firstPage
  nextTick(() => {
    computeResponse()
    if(!SocketStore.firstEnter) SocketStore.socket.send({ type: 'COUNT' }) // 不是首次进入才会发送数据条数请求
  })
})

onUnmounted(() => {
  if (SocketStore.socket) {
    SocketStore.setDefaultMessage() // 页面销毁之前接受消息变成默认响应
  } else {
    SocketStore.setWebsocket() // 若长连接不存在则重新生成一个
  }
})
</script>

<style scoped lang="scss">
:deep(.el-card__body) {
  height: 100%;
}

.customTabs {
  display: flex;
  gap: 1.2rem;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  font-size: 12px;
  .customTabsItem {
    //--el-color-primary: #4CBC9A;
    flex: 1;
    transition: all 0.3s;
    text-align: center;
    padding: 0.45rem 0.5rem;
    border-radius: 16px;
    cursor: pointer;
    border: 1px solid var(--el-color-primary);
    &:hover {
      background: var(--el-color-primary);
    }
  }
}
:deep(.el-tabs__header) {
  margin: 0;
}
:deep(.el-tabs__content) {
  flex: 1;
  overflow: auto;
}
.messageContent::-webkit-scrollbar, .userMessageList::-webkit-scrollbar {
  display: none;
}

:deep(.el-textarea__inner)::-webkit-scrollbar {
  display: none;
}

.messageInfo {
  :deep(.el-card__body) {
    padding: 0 !important;
  }
}

:deep(.el-textarea){
  width: 100%;
  height: 100%;
  border: none;
  resize: none;
  cursor: pointer;
}

.is-disabled {
  :deep(.el-textarea__inner) {
    background: transparent !important;
  }
}

:deep(.el-textarea__inner) {
  border: none !important;
  resize: none !important;
  box-shadow: none !important;
  padding: 0;
  height: 100%;
  padding-top: 19px;
}

.el-textarea::-webkit-scrollbar {
  display: none;
}

:deep(.el-tabs__nav) {
  width: 100%;
}

:deep(.el-tab-pane) {
  height: 100%;
}

:deep(.el-tabs__item) {
  width: 33.33%;
  padding: 25px 0;
}

.--el-input-placeholder-color {
  color: #ccc;
}
/*:deep(textarea.el-textarea__inner)::-webkit-input-placeholder {
  line-height: 64px;
}*/

#EmojiItem {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

:deep(#tippy-1) {
  width: 450px;

  .tippy-box {
    max-width: 100% !important;

    #pollUpEl {
      width: 100%;
    }
  }
}
</style>